<template>
  <div class="record-card">
    <div class="record-content">
      <div class="record-info">
        <h4 class="record-title">{{ record.title }}</h4>
        <p class="record-time">{{ formatTime(record.time) }}</p>
      </div>
      <div class="record-thumbnail">
        <img src="@/assets/image02.png" alt="缩略图" />
      </div>
    </div>
    <div class="record-actions">
      <button class="action-button" @click="handleDetail">{{ $t('assets.studentList.detail') }}</button>
      <button class="action-button" @click="handleDelete">{{ $t('common.delete') }}</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { t as $t } from '@/plugins/simpleI18n'

const router = useRouter()

interface Record {
  id: number
  title: string
  time: Date
  type?: string
  subject?: string
}

interface Props {
  record: Record
  routeName?: string
}

interface Emits {
  (e: 'detail', record: Record): void
  (e: 'delete', record: Record): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 格式化时间
const formatTime = (time: Date) => {
  return time.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  }).replace(/\//g, '-')
}

// 处理详情点击
const handleDetail = () => {
  // 根据路由名称决定跳转目标
  if (props.routeName === 'grading-history') {
    // 历史批改记录页面 -> 作业详情页面
    console.log('跳转到作业详情页面, 记录ID:', props.record.id)
    router.push({
      path: '/homework-submission-detail',
      query: {
        recordId: props.record.id,
        from: 'grading-history',
        taskId: props.record.id,
        studentId: 'student_' + props.record.id,
        taskName: props.record.title,
        studentName: '学生姓名'
      }
    })
  } else if (props.routeName === 'homework-review') {
    // 批改作业页面 -> 照片预览页面
    console.log('跳转到照片预览页面, 记录ID:', props.record.id)
    router.push({
      path: '/photo-preview',
      query: {
        recordId: props.record.id,
        from: 'homework-review'
      }
    })
  } else if (props.routeName === 'teacher-error-collection') {
    // 错题集页面 -> 错题集详情页面
    console.log('跳转到错题集详情页面, 记录ID:', props.record.id)
    router.push({
      path: '/wrong-question-collection',
      query: {
        recordId: props.record.id,
        from: 'error-collection'
      }
    })
  } else {
    // 默认行为，通过emit传递给父组件
    console.log('使用默认行为，emit到父组件')
    emit('detail', props.record)
  }
}

// 处理删除点击
const handleDelete = () => {
  emit('delete', props.record)
}
</script>

<style scoped>
.record-card {
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transition: all 0.3s ease;
}

.record-content {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 5px;
  flex-direction: column;
}

.record-info {
  flex: 1;
}

.record-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin: 0 0 8px 0;
}

.record-time {
  font-size: 12px;
  color: #909399;
  margin: 0;
}

.record-thumbnail {
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.record-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.record-actions {
  display: flex;
  border-top: 1px solid #f0f0f0;
}

.action-button {
  flex: 1;
  padding: 12px;
  border: none;
  background: #fff;
  color: #409eff;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-button:first-child {
  border-right: 1px solid #f0f0f0;
}

.action-button:hover {
  background: #f8f9fa;
  color: #66b1ff;
}
</style>
